<template>
    <el-row :gutter="gutter" class="upload-info-container"> <!--16:9添加cover-map-->
        <el-col :span="span">
            <div class="layout-block">
                <div class="upload-btn" :class="{'has-img':value[imgName]}" @click="openDialog">
                    <i v-show="!disabled" :class="value[imgName]?'el-icon-edit-outline':'el-icon-plus'" />
                    <video v-if="options.media === 'video'" v-show="value[imgName]" :src="value[imgName]" controls class="uploaded-single" />
                    <img v-else v-show="value[imgName]" :src="value[imgName]" alt="" class="uploaded-single">
                </div>
            </div>
        </el-col>
        <!--弹窗-->
        <el-dialog title="上传图片" custom-class="custom-dialog-form" :visible.sync="uploadDialogShow" width="420px" :close-on-click-modal="false">
            <el-form ref="rePwdForm" :rules="uploadDialogRules" :model="temp" label-position="top">
                <el-form-item label="图片上传" prop="img">
                    <UploadMedia v-model="temp[imgName]" :gutter="options.gutter" :span="options.span" :media="options.media" :size="options.size" />
                </el-form-item>
                <el-form-item v-for="item in fields" :key="item.name" :label="item.tips" :prop="item.name">
                    <el-input v-if="!item.type" v-model="temp[item.name]" :placeholder="item.tips" />
                    <el-date-picker v-if="item.type === 'date'" v-model="temp[item.name]" type="date" :placeholder="item.tips" value-format="yyyy-MM-dd" />
                    <el-select v-if="item.type === 'select'" v-model="temp[item.name]" :placeholder="item.tips" filterable collapse-tags>
                        <el-option v-for="child in item.options" :key="child[item.key||'value']" :label="child.label" :value="child[item.value||'value']" />
                    </el-select>
                </el-form-item>
                <div class="el-message-box__btns">
                    <button type="button" class="el-button el-button--default" @click="uploadDialogCancel"><span>取消</span></button>
                    <button type="button" class="el-button el-button--default el-button--primary" @click="uploadDialogSave()"><span>保存</span></button>
                </div>
            </el-form>
        </el-dialog>
    </el-row>
</template>

<script>
import UploadMedia from '@/components/UploadMedia'
import { cloneDeep } from 'lodash'
export default {
    name: 'UploadMediaInfo',
    components: { UploadMedia },
    props: {
        value: {
            type: Object,
            default() {
                return {} // v-model绑定值，默认为对象格式
            }
        },
        gutter: {
            type: Number,
            default: 20 // 间隔 px
        },
        span: {
            type: Number,
            default: 24 // 分栏 1/24
        },
        disabled: {
            type: Boolean,
            default: false
        },
        imgName: {
            type: String,
            default: 'imgField' // 默认img的字段名
        },
        fields: {
            type: Array,
            default() {
                return [] // name:字段名，tips:提示，type:表单类型-input|select|date，options:select类型下的选项数组
            }
        },
        options: {
            type: Object,
            default() {
                return {
                    media: 'image', // 默认上传图片，可选：video
                    size: '', // 尺寸提示：1920*1080
                    gutter: 20, // 间隔：px
                    span: 24 // 分栏 * 1/24
                }
            }
        },
        extra: {
            type: Object,
            default: function() {
                return {}
            }
        }
    },
    data: function() {
        return {
            lastValue: {},
            temp: {},
            uploadDialogShow: false
        }
    },
    computed: {
        uploadDialogRules() {
            return {}
        }
    },
    watch: {
        value(value) {
            this.temp = cloneDeep({ ...this.extra, ...value });
        }
    },
    created() {
    },
    methods: {
        openDialog() {
            this.temp = cloneDeep({ ...this.extra, ...this.value });
            this.lastValue = cloneDeep({ ...this.extra, ...this.value });
            this.uploadDialogShow = true
        },
        uploadDialogCancel() {
            // this.$emit('input', this.lastValue);
            this.uploadDialogShow = false
        },
        uploadDialogSave() {
            this.$emit('input', this.temp);
            this.uploadDialogShow = false
        }
    }
}
</script>

<style lang="scss" scoped>
.upload-info-container {
    .layout-block {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }

    .upload-btn {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dashed #d9d9d9;
        background-color: #fbfdff;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: .3s;

        i {
            position: relative;
            font-size: 28px;
            color: #8c939d;
            transition: .3s;
            z-index: 5;
        }

        .uploaded-single{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 1;
            transition: .3s;
        }
        &:hover {
            background-color: #e6ebf1;
            border-color: #1d38FF;
            i{
                color: #1d38FF;
            }
        }
        &.has-img {
            i {
                color: #fff;
                opacity: 0;
                filter: drop-shadow(0px 0px 4px black);
                transition: .3s;
            }

            &:hover {
                i {
                    opacity: 1;
                }
            }
        }
    }
}
</style>
